import React, { useState } from 'react';
import Layout from '../components/Layout';
import Banner from '../components/Banner';
import Image from 'next/image';
import Link from 'next/link';

// 新闻类型定义
interface NewsItem {
  id: number;
  title: string;
  summary: string;
  content: string;
  image: string;
  date: string;
  category: string;
  author: string;
  slug: string;
}

const NewsPage = () => {
  // 新闻分类列表
  const categories = [
    { id: 'all', name: '全部' },
    { id: 'company', name: '公司动态' },
    { id: 'product', name: '产品资讯' },
    { id: 'industry', name: '行业洞察' },
    { id: 'event', name: '活动预告' },
  ];

  // 新闻列表数据
  const newsItems: NewsItem[] = [
    {
      id: 1,
      title: '凡科星悦完成C轮2亿元融资，加速产品创新与市场扩张',
      summary: '本轮融资由某知名投资机构领投，将用于加强技术研发和市场拓展，进一步巩固公司在智能化解决方案领域的领先地位。',
      content: '完整的新闻内容...',
      image: '/images/news/funding.jpg',
      date: '2023-12-15',
      category: 'company',
      author: '公司新闻部',
      slug: 'series-c-funding'
    },
    {
      id: 2,
      title: '凡科星悦荣获"2023中国最具创新力企业"称号',
      summary: '在近日举行的"2023中国企业创新大会"上，凡科星悦凭借在人工智能和大数据领域的创新成就，获得"中国最具创新力企业"荣誉。',
      content: '完整的新闻内容...',
      image: '/images/news/award.jpg',
      date: '2023-11-20',
      category: 'company',
      author: '市场部',
      slug: 'innovation-award-2023'
    },
    {
      id: 3,
      title: '凡科星悦发布最新版智能数据分析平台，引入多项AI新功能',
      summary: '新版平台引入自然语言查询、智能异常检测等多项AI功能，大幅提升了数据分析效率和洞察能力。',
      content: '完整的新闻内容...',
      image: '/images/news/data-platform.jpg',
      date: '2023-10-25',
      category: 'product',
      author: '产品团队',
      slug: 'new-data-platform-release'
    },
    {
      id: 4,
      title: '2023中国制造业数字化转型白皮书发布，凡科星悦提供深度洞察',
      summary: '白皮书深入分析了中国制造业数字化转型的现状、挑战和趋势，为制造企业提供了实用的转型路径指南。',
      content: '完整的新闻内容...',
      image: '/images/news/whitepaper.jpg',
      date: '2023-09-18',
      category: 'industry',
      author: '研究团队',
      slug: 'manufacturing-digital-transformation-whitepaper'
    },
    {
      id: 5,
      title: '凡科星悦与某大型制造集团达成战略合作，共推工业数字化',
      summary: '双方将在工业物联网、智能制造等领域展开深度合作，共同推动制造业数字化转型升级。',
      content: '完整的新闻内容...',
      image: '/images/news/partnership.jpg',
      date: '2023-08-30',
      category: 'company',
      author: '战略合作部',
      slug: 'manufacturing-partnership'
    },
    {
      id: 6,
      title: '2023数字化转型趋势分析：人工智能将成为核心驱动力',
      summary: '报告指出，在未来五年内，人工智能将成为企业数字化转型的核心驱动力，带来业务流程和商业模式的深刻变革。',
      content: '完整的新闻内容...',
      image: '/images/news/ai-trend.jpg',
      date: '2023-07-15',
      category: 'industry',
      author: '研究团队',
      slug: 'digital-transformation-ai-trend'
    },
    {
      id: 7,
      title: '凡科星悦2023用户大会将于下月举行，聚焦数字化创新实践',
      summary: '本次大会将邀请行业专家和优秀客户分享数字化转型经验，展示凡科星悦最新产品和解决方案。',
      content: '完整的新闻内容...',
      image: '/images/news/conference.jpg',
      date: '2023-06-28',
      category: 'event',
      author: '市场部',
      slug: 'user-conference-2023'
    },
    {
      id: 8,
      title: '凡科星悦AR智能眼镜获得"2023年度最佳工业创新产品"奖',
      summary: '在2023工业科技博览会上，凡科星悦AR智能眼镜凭借其创新设计和卓越性能，获得了最佳工业创新产品奖。',
      content: '完整的新闻内容...',
      image: '/images/news/ar-award.jpg',
      date: '2023-05-20',
      category: 'product',
      author: '产品团队',
      slug: 'ar-glasses-award'
    }
  ];

  // 状态管理
  const [activeCategory, setActiveCategory] = useState('all');
  const [searchQuery, setSearchQuery] = useState('');

  // 过滤新闻
  const filteredNews = newsItems.filter(news => {
    // 类别过滤
    const categoryMatch = activeCategory === 'all' || news.category === activeCategory;
    
    // 搜索过滤
    const searchMatch = news.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                        news.summary.toLowerCase().includes(searchQuery.toLowerCase());
    
    return categoryMatch && searchMatch;
  });

  // 格式化日期
  const formatDate = (dateString: string) => {
    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', options);
  };

  return (
    <Layout title="新闻动态 - 凡科星悦" description="了解凡科星悦的最新动态、产品发布和行业见解">
      <Banner 
        title="新闻动态" 
        subtitle="了解凡科星悦的最新动态、产品发布和行业见解" 
        backgroundImage="/images/news-banner.jpg"
      />

      {/* 新闻搜索和筛选 */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between mb-8">
            {/* 类别筛选 */}
            <div className="flex flex-wrap mb-4 md:mb-0">
              {categories.map(category => (
                <button
                  key={category.id}
                  onClick={() => setActiveCategory(category.id)}
                  className={`px-4 py-2 mr-2 mb-2 rounded-full ${
                    activeCategory === category.id
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  } transition-colors duration-300`}
                >
                  {category.name}
                </button>
              ))}
            </div>

            {/* 搜索框 */}
            <div className="w-full md:w-64">
              <div className="relative">
                <input
                  type="text"
                  placeholder="搜索新闻..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <svg className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </div>
            </div>
          </div>

          {/* 新闻列表 */}
          {filteredNews.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredNews.map(news => (
                <div key={news.id} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                  <Link href={`/news/${news.slug}`} className="block">
                    <div className="relative h-48">
                      <Image 
                        src={news.image} 
                        alt={news.title} 
                        layout="fill" 
                        objectFit="cover" 
                      />
                    </div>
                    <div className="p-6">
                      <div className="flex justify-between items-center mb-3">
                        <span className="text-sm text-blue-600 font-medium">
                          {categories.find(c => c.id === news.category)?.name}
                        </span>
                        <span className="text-sm text-gray-500">{formatDate(news.date)}</span>
                      </div>
                      <h3 className="text-xl font-bold text-gray-800 mb-2 line-clamp-2">{news.title}</h3>
                      <p className="text-gray-600 mb-4 line-clamp-3">{news.summary}</p>
                      <div className="flex justify-between items-center">
                        <span className="text-sm text-gray-500">{news.author}</span>
                        <span className="text-blue-600 hover:text-blue-700 font-medium flex items-center">
                          阅读更多
                          <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                          </svg>
                        </span>
                      </div>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <svg className="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <h3 className="text-xl font-bold text-gray-700 mb-2">没有找到相关新闻</h3>
              <p className="text-gray-500">请尝试其他搜索关键词或筛选条件</p>
            </div>
          )}
        </div>
      </section>

      {/* 订阅栏 */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-4">订阅我们的新闻通讯</h2>
            <p className="mb-8 opacity-90">
              及时获取我们的最新动态、产品更新和行业见解
            </p>
            <div className="flex flex-col md:flex-row items-center justify-center">
              <input 
                type="email" 
                placeholder="请输入您的电子邮箱" 
                className="w-full md:w-auto md:flex-1 max-w-md px-6 py-4 rounded-full mb-4 md:mb-0 md:mr-4 text-gray-800 focus:outline-none focus:ring-2 focus:ring-yellow-400"
              />
              <button className="bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-medium px-8 py-4 rounded-full transition-colors duration-300">
                立即订阅
              </button>
            </div>
            <p className="mt-4 text-sm opacity-80">
              我们尊重您的隐私，绝不会向第三方分享您的信息。
            </p>
          </div>
        </div>
      </section>

      {/* 媒体资源 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">媒体资源</h2>
            <p className="text-gray-600">
              获取我们的品牌资源、媒体素材和联系方式
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-50 p-8 rounded-lg text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">品牌资源</h3>
              <p className="text-gray-600 mb-4">
                下载我们的品牌标识、图片和使用指南
              </p>
              <Link href="/media-kit" className="inline-block px-6 py-2 border-2 border-blue-600 text-blue-600 rounded-full hover:bg-blue-600 hover:text-white transition-colors duration-300 font-medium">
                下载资源
              </Link>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-lg text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                </svg>
              </div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">新闻稿</h3>
              <p className="text-gray-600 mb-4">
                浏览和下载我们的历史新闻稿发布
              </p>
              <Link href="/press-releases" className="inline-block px-6 py-2 border-2 border-blue-600 text-blue-600 rounded-full hover:bg-blue-600 hover:text-white transition-colors duration-300 font-medium">
                查看新闻稿
              </Link>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-lg text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">媒体联系</h3>
              <p className="text-gray-600 mb-4">
                联系我们的公关团队获取更多信息
              </p>
              <Link href="/media-contact" className="inline-block px-6 py-2 border-2 border-blue-600 text-blue-600 rounded-full hover:bg-blue-600 hover:text-white transition-colors duration-300 font-medium">
                联系我们
              </Link>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
};

export default NewsPage; 